<template>
    <view class="shortcut" :style="'right: ' + right + '; bottom: ' + bottom + ';'">
        <!-- 首页 -->
        <form @submit="_onTargetPage">
            <button formType="submit" data-index="0" :class="'nav-item btn-normal ' + (isShow ? 'show_80' : transparent ? '' : 'hide_80')">
                <text class="iconfont icon-home"></text>
            </button>
        </form>

        <!-- 分类页 -->
        <form @submit="_onTargetPage">
            <button formType="submit" data-index="1" :class="'nav-item btn-normal ' + (isShow ? 'show_60' : transparent ? '' : 'hide_60')">
                <text class="iconfont icon-cate"></text>
            </button>
        </form>

        <!-- 购物车 -->
        <form @submit="_onTargetPage">
            <button formType="submit" data-index="2" :class="'nav-item btn-normal ' + (isShow ? 'show_40' : transparent ? '' : 'hide_40')">
                <text class="iconfont icon-cart"></text>
            </button>
        </form>

        <!-- 个人中心 -->
        <form @submit="_onTargetPage">
            <button formType="submit" data-index="3" :class="'nav-item btn-normal ' + (isShow ? 'show_20' : transparent ? '' : 'hide_20')">
                <text class="iconfont icon-profile"></text>
            </button>
        </form>

        <!-- 显示隐藏开关 -->
        <form @submit="_onToggleShow">
            <button formType="submit" :class="'nav-item nav-item__switch btn-normal ' + (isShow ? 'shortcut_click_show' : '')">
                <text class="iconfont icon-daohang"></text>
            </button>
        </form>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            // 弹窗显示控制
            isShow: false,
            transparent: true
        };
    },
    options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
    },
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
        right: {
            type: String,
            default: '24rpx'
        },
        bottom: {
            type: String,
            default: '250rpx'
        }
    },
    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {
        /**
         * 导航菜单切换事件
         */
        _onToggleShow(e) {
            // 记录formid
            app.saveFormId(e.detail.formId);
            this.setData({
                isShow: !this.isShow,
                transparent: false
            });
        },

        /**
         * 导航页面跳转
         */
        _onTargetPage(e) {
            let urls = app.getTabBarLinks(); // 记录formid

            app.saveFormId(e.detail.formId);
            uni.switchTab({
                url: '/' + urls[e.detail.target.dataset.index]
            });
        }
    }
};
</script>
<style lang="scss">
@import '../../utils/common.scss';

/* 快捷导航 */

.shortcut {
    position: fixed;
    right: 24rpx;
    bottom: 250rpx;
    width: 76rpx;
    line-height: 1;
    z-index: 5;
    border-radius: 50%;
}

/* 导航菜单元素 */

.nav-item {
    position: absolute;
    bottom: 0;
    padding: 0;
    width: 76rpx;
    height: 76rpx;
    line-height: 76rpx;
    color: $uni-text-color-inverse;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    text-align: center;
    transform: rotate(0deg);
    opacity: 0;
}

.nav-item text {
    font-size: 40rpx;
}

/* 导航开关 */

.nav-item__switch {
    opacity: 1;
}

.shortcut_click_show {
    margin-bottom: 0;
    background: #ff5454;
}

/* 显示动画 */

.show_80 {
    bottom: 384rpx;
    animation: show_80 0.3s forwards;
}

.show_60 {
    bottom: 288rpx;
    animation: show_60 0.3s forwards;
}

.show_40 {
    bottom: 192rpx;
    animation: show_40 0.3s forwards;
}

.show_20 {
    bottom: 96rpx;
    animation: show_20 0.3s forwards;
}

@keyframes show_20 {
    from {
        bottom: 0;
        transform: rotate(0deg);
        opacity: 0;
    }

    to {
        bottom: 96rpx;
        transform: rotate(360deg);
        opacity: 1;
    }
}

@keyframes show_40 {
    from {
        bottom: 0;
        transform: rotate(0deg);
        opacity: 0;
    }

    to {
        bottom: 192rpx;
        transform: rotate(360deg);
        opacity: 1;
    }
}

@keyframes show_60 {
    from {
        bottom: 0;
        transform: rotate(0deg);
        opacity: 0;
    }

    to {
        bottom: 288rpx;
        transform: rotate(360deg);
        opacity: 1;
    }
}

@keyframes show_80 {
    from {
        bottom: 0;
        transform: rotate(0deg);
        opacity: 0;
    }

    to {
        bottom: 384rpx;
        transform: rotate(360deg);
        opacity: 1;
    }
}

/* 隐藏动画 */

.hide_80 {
    bottom: 0;
    animation: hide_80 0.3s;
    opacity: 0;
}

.hide_60 {
    bottom: 0;
    animation: hide_60 0.3s;
    opacity: 0;
}

.hide_40 {
    bottom: 0;
    animation: hide_40 0.3s;
    opacity: 0;
}

.hide_20 {
    bottom: 0;
    animation: hide_20 0.3s;
    opacity: 0;
}

@keyframes hide_20 {
    from {
        bottom: 96rpx;
        transform: rotate(360deg);
        opacity: 1;
    }

    to {
        bottom: 0;
        transform: rotate(0deg);
        opacity: 0;
    }
}

@keyframes hide_40 {
    from {
        bottom: 192rpx;
        transform: rotate(360deg);
        opacity: 1;
    }

    to {
        bottom: 0;
        transform: rotate(0deg);
        opacity: 0;
    }
}

@keyframes hide_60 {
    from {
        bottom: 288rpx;
        transform: rotate(360deg);
        opacity: 1;
    }

    to {
        bottom: 0;
        transform: rotate(0deg);
        opacity: 0;
    }
}

@keyframes hide_80 {
    from {
        bottom: 384rpx;
        transform: rotate(360deg);
        opacity: 1;
    }

    to {
        bottom: 0;
        transform: rotate(0deg);
        opacity: 0;
    }
}
</style>
